<template>
	<!-- 轮播图 -->
	<!-- <el-carousel height="330px" :autoplay="false">
		<el-carousel-item v-for="item in 1" :key="item" >
			<div class="small justify-center" style="background-color: #999999;height: 100%;" text="2xl">
				<img src="https://img-blog.csdnimg.cn/6d15082ac7234ec7a16065e74f689590.jpeg" alt="">
				<el-image style="width: 100%; height: 100%" src="/src/assets/images/2.jpeg" fit="contain"  />
			</div>
		</el-carousel-item>
	</el-carousel> -->
	<template v-if="banners.length == 1">
		<div class="banner" style="height: 330px;" v-for="(item, index) in banners" @click="togo(item)" :key="index">
			<el-image style="width: 100%; height: 100%" :src="item.pictrue" fit="fill" />
		</div>
	</template>
	<swiper :autoplay="autoPlaySet" :loop="true" effect="slide" class="swiperBox" :modules="modules" :speed="1000"
		:pagination="{ clickable: true }" lazy v-loading="banners.length === 0">
		<swiper-slide style="width: 100%;" v-for="(item, index) in banners" :key="index">
			<el-image style="width: 100%; height: 100%" :src="item.pictrue" fit="fill" />
		</swiper-slide>
	</swiper>

	<!-- 有学习记录 -->
	<xy-study-item v-if="store.isLogin"></xy-study-item>
	<!-- 精选课程 -->
	<xy-choiceness-item></xy-choiceness-item>
	<!-- 免费课程 -->
	<xy-free-item></xy-free-item>
	<!-- 客服 -->
	<!-- <xy-service v-if="store.isLogin"></xy-service> -->
</template>

<script setup lang="ts">
import api from '@/api/api';
import { useRouter } from "vue-router";
import { EffectFade, Pagination } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/effect-fade';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { useUserStore } from "@/stores";
defineOptions({ name: "home-index" });

const store = useUserStore()
const banners = ref<any>([])
//组件命名-----
onMounted(async () => {
	const res = await api.GetindexContent_API()
	if (res.code == 0) {
		banners.value = res.data.pcBanners
	}
})

const router = useRouter()
const togo = (e) => {
	console.log("🚀 ~ togo ~ e:", e)
	// router.push({
	// 	path: e.url,

	// })
}
const modules = [EffectFade, Pagination]
const autoPlaySet = {
	delay: 2000,//间隔2秒
	stopOnLastSlide: false,//自动播放将在到达最后一张幻灯片时停止（在循环模式下不起作用）
	disableOnInteraction: false,
	pauseOnMouseEnter: true
}
const navigationSet = {
	// hideOnClick:true
}
</script>

<style lang="scss" scoped>
.swiperBox {
	width: 100%;
	height: 330px;
}
</style>
